<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
    
    <style>
        .container{
            max-width: 800px;
            margin:0 auto;
        }
        .container:after{
            content:"";
            display: block;
            clear:both;
        }
        .container img{
            width:50%;
            height:260px;
            float:left;
        }
    </style>
</head>
<body>
    <div class="container">
         <img src="img/1.jpg" alt="BMW 宝马汽车" data-src="img/1.jpg" />
		 <img src="img/2.jpg" alt="Alfa Romeo 阿尔法-罗米欧" data-src="img/2.jpg" />
		 <img src="img/3.jpg" alt="Skoda 斯柯达" data-src="img/3.jpg"/>
		 <img src="img/4.jpg" alt="Volkswagen 大众汽车" data-src="img/4.jpg"/>
		 <img src="img/5.jpg" alt="Saab 萨布牌轿" data-src="img/5.jpg"/>
		 <img src="img/6.jpg" alt="Lamborghini 兰博基尼" data-src="img/6.jpg"/>
		 <img src="img/7.jpg" alt="Porsche 保时捷" data-src="img/7.jpg"/>
		 <img src="img/8.jpg" alt="Peugeot 标致" data-src="img/8.jpg"/>
		 <img src="img/9.jpg" alt="Mercedes1 梅赛德斯 奔驰" data-src="img/9.jpg"/>
		 <img src="img/10.jpg" alt="Buick 别克汽车" data-src="img/10.jpg"/>
		 
		  <img src="img/1.jpg" alt="BMW 宝马汽车" data-src="img/1.jpg" />
		 <img src="img/2.jpg" alt="Alfa Romeo 阿尔法-罗米欧" data-src="img/2.jpg" />
		 <img src="img/3.jpg" alt="Skoda 斯柯达" data-src="img/3.jpg"/>
		 <img src="img/4.jpg" alt="Volkswagen 大众汽车" data-src="img/4.jpg"/>
		 <img src="img/5.jpg" alt="Saab 萨布牌轿" data-src="img/5.jpg"/>
		 <img src="img/6.jpg" alt="Lamborghini 兰博基尼" data-src="img/6.jpg"/>
		 <img src="img/7.jpg" alt="Porsche 保时捷" data-src="img/7.jpg"/>
		 <img src="img/8.jpg" alt="Peugeot 标致" data-src="img/8.jpg"/>
		 <img src="img/9.jpg" alt="Mercedes1 梅赛德斯 奔驰" data-src="img/9.jpg"/>
		 <img src="img/10.jpg" alt="Buick 别克汽车" data-src="img/10.jpg"/>
		 
    </div>

        <script>

            // 一开始没有滚动的时候，出现在视窗中的图片也会加载
            start();

            // 当页面开始滚动的时候，遍历图片，如果图片出现在视窗中，就加载图片
            var clock; //函数节流
            $(window).on('scroll',function(){
                if(clock){
                    clearTimeout(clock);
                }
                clock = setTimeout(function(){
                    start()
                },200)
            })
            
            function start(){
                 $('.container img').not('[data-isLoading]').each(function () {
                    if (isShow($(this))) {
                        loadImg($(this));
                    }
                })
            }


            // 判断图片是否出现在视窗的函数
            function isShow($node){
                return $node.offset().top <= $(window).height()+$(window).scrollTop();
            }

            // 加载图片的函数，就是把自定义属性data-src 存储的真正的图片地址，赋值给src
            function loadImg($img){
                    $img.attr('src', $img.attr('data-src'));

                    // 已经加载的图片，我给它设置一个属性，值为1，作为标识
                    // 弄这个的初衷是因为，每次滚动的时候，所有的图片都会遍历一遍，这样有点浪费，所以做个标识，滚动的时候只遍历哪些还没有加载的图片
                    $img.attr('data-isLoading',1);
            }

        </script>
</body>
</html>